import React from 'react'
import { connect } from 'react-redux'
import { Button, Input, Accordion } from 'semantic-ui-react'
import { dataset as datasetDuck } from 'ducks'
import { push } from 'connected-react-router'
import {
  SubNavMenu, SubNavItem, SubNavSubItem, SubNavSubTitle,
} from 'components/navListMenv'

const DataSetList = ({
  datasets, actionNewDataset, activeDataset, actionToDataset,
}) => (
  <SubNavMenu vertical tabular>
    <SubNavItem className="subnav top">
      <Button basic color="blue" fluid onClick={actionNewDataset}>
        创建数据集
      </Button>
    </SubNavItem>
    <SubNavItem>
      <Input icon="search" placeholder="搜索数据集" />
    </SubNavItem>
    <SubNavItem className="subnav section" name="数据集列表" />
    {datasets
      && datasets.result.length > 0
      && datasets.result.map((serverId) => {
        const server = datasets.entities.server[serverId]
        return (
          <React.Fragment>
            <Accordion
              as={SubNavSubTitle}
              panels={[
                {
                  key: server.id,
                  title: server.name,
                },
              ]}
              vertical
            />
            {server.dataset_array.map((datasetId) => {
              const dataset = datasets.entities.dataset[datasetId]
              return (
                <SubNavSubItem
                  className={activeDataset === dataset.name ? 'subactive' : ''}
                  onClick={() => actionToDataset(dataset.name)}
                >
                  <a>
                    <span>{dataset.name}</span>
                  </a>
                </SubNavSubItem>
              )
            })}
          </React.Fragment>
        )
      })}
  </SubNavMenu>
)

const mapStateToProps = state => ({
  datasets: datasetDuck.selectors.datasets(state),
  activeDataset: datasetDuck.selectors.activeDataset(state),
})

const mapDispatchToProps = {
  actionSetActiveDataset: datasetDuck.creators.actionSetActiveDataset,
  actionNewDataset: () => push('/dataset/new'),
  actionToDataset: name => push(`/dataset/${name}`),
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(DataSetList)
